<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="/lib/jquery/dist/jquery.min.js"></script>-->
    <script src="/lib/echarts/dist/echarts.min.js"></script>
    <script src="/lib/sockjs/sockjs.js"></script>
    <script src="/lib/stomp.js"></script>
    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/art-template/lib/template-web.js"></script>
    <style>
        .deviceArea {
            position: relative;
            border: 1px dashed green;
            height: 98%;
            width: 99%;
        }
        .device {
            position: absolute;
            top: 5%;
            border: 1px solid red;
            width: 20%;
            height: 50%;
        }
        .device2 {
            position: absolute;
            top: 5%;
            border: 1px solid red;
            width: 20%;
            height: 40%;
        }
        .column {
            border: 1px dashed green;
        }
        td{
            height: 39px;
        }
    </style>
</head>
<body>

<div><h3 class="text-center">明匠智能-非标自动化制造工厂-生产看板</h3>
    <a onclick="javascrpt:getchartData()"></a>
</div>
<div class="container" style=" height:1080px; width: 1920px;">
    <div class="row" style=" height:45%;">
        <div class="col-md-6 col-lg-6 clearfix">
            <div id="charts" style=" width: 100%;height:485px;"></div>
        </div>
        <div class="col-md-6 col-lg-6 clearfix" style="vertical-align: middle;text-align: center;">
            <table border="1" class="table " style="margin:0 auto;">
                <tr>
                    <td width="30%">名称</td>
                    <td width="30%">图纸编号</td>
                    <td width="10%">当前工序</td>
                    <td width="20%">创建时间</td>
                    <td width="10%">状态</td>
                </tr>
            </table>
            <div class="scroll" style="height:430px; overflow:hidden;margin:0 auto;">
                <table border="1" id="scrollList" class="table">
                    <script id="workOrders" type="text/html">
                        {{each rows}}
                        <tr>
                            <td width="30%">{{$value.part_name}}</td>
                            <td width="30%">{{$value.chart_number}}</td>
                            <td width="10%">{{$value.NAME_}}</td>
                            <td width="20%">{{$value.START_TIME_}}</td>
                            <td width="10%">{{$value.work_order_status}}</td>
                        </tr>
                        {{/each}}
                    </script>
                </table>
            </div>
        </div>
    </div>
    <div class="row" id="row2" style="height:50%;">
        <div class="row " style="height:25%;">
            <div class="col-md-3 col-lg-3 column" style="height:100%;">
                <div id="1-1-1" class="deviceArea"><p>原料放置区</p></div>
            </div>
            <div class="col-md-9 column" style="height:100%;">
                <div id="1-2-1" class="deviceArea" style="float:left;width: 20%;">
                    <p>原料放置区</p></div>
                <div id="1-2-2" class="device" style="left: 23%;">数控激光火焰切割机</div>
                <div id="1-2-3" class="device" style="left: 44%;">数控等离子切割机</div>
                <div id="1-2-4" class="device" style="left: 65%;">数控激光火焰切割机</div>
            </div>
        </div>
        <div class="row" style="height:25%;">
            <div class="col-md-3 column" style="height:100%;">
            </div>
            <div class="col-md-9 column" style="height:100%;">
                <div id="2-2-1" class="device" style="left: 1%; width: 15%">卧铣</div>
                <div id="2-2-2" class="device" style="left: 17%;width: 15%">卧铣</div>
                <div id="2-2-3" class="device" style="left: 33%;width: 15%">卧铣</div>
                <div id="2-2-4" class="device" style="left: 49%;width: 15%">卧铣</div>
                <div id="2-2-5" class="device" style="left: 65%;width: 15%">卧铣</div>
                <div id="2-2-6" class="device" style="left: 81%;width: 18%">预备炮塔铣</div>
            </div>
        </div>
        <div class="row" style="height:25%;">
            <div class="col-md-3 column" style="height:100%;">
                <div id="3-1-1" class="device2" style="right: 225px;">攻丝机</div>
                <div id="3-1-2" class="device2" style="right: 115px;">摇臂钻</div>
                <div id="3-1-3" class="device2" style="right: 5px;">摇臂钻</div>
                <div id="3-1-4" class="device2" style="right: 115px; top: 50%">中走丝</div>
                <div id="3-1-5" class="device2" style="right: 5px; top: 50%">中走丝</div>
            </div>
            <div class="col-md-9 column" style="height:100%;">
                <div id="3-2-1" class="device2" style="left:1%;width: 10%;">普车</div>
                <div id="3-2-2" class="device2" style="left: 12%;width: 10%;">普车</div>
                <div id="3-2-3" class="device2" style="left: 23%;width: 10%;">普车</div>
                <div id="3-2-4" class="device2" style="left: 34%;width: 10%;">普车</div>
                <div id="3-2-5" class="device2" style="left: 45%;width: 15%;">预备炮数控车床</div>
                <div id="3-2-6" class="device2" style="right: 1%; width: 34%; height: 90%;">折弯机</div>
                <div id="3-2-7" class="device2" style="left: 1%; top: 50%; width: 15%;">HPC650卧式加工</div>
                <div id="3-2-8" class="deviceArea" style="left: 17%; top: 50%; width: 14%; height: 40%;">CNC办公区</div>
                <div id="3-2-9" class="device2" style="left: 32%; top: 50%; width: 15%;">Vmc1000</div>
                <div id="3-2-10" class="device2" style="left: 48%; top: 50%; width: 15%;">T-V</div>
            </div>
        </div>
        <div class="row" style="height:25%;">
            <div class="col-md-3 column" style="height:100%;">
                <div id="4-1-1" class="device2" style="right: 5%;width: 60%;">加工零件成品区</div>
                <div id="4-1-2" class="device2" style="right: 5%;width: 60%;top:50%;">出货打包区</div>
            </div>
            <div class="col-md-4 column" style="height:100%;">
                <div id="4-2-1" class="device2" style="right: 68%; font-size: 12px">T111</div>
                <div id="4-2-2" class="device2" style="right: 46%; font-size: 12px">VMC1000L</div>
                <div id="4-2-3" class="device2" style="right: 24%; font-size: 12px">VMC1000L</div>
                <div id="4-2-4" class="device2" style="right: 24%;top: 50%;width: 42%; ">5000*2500龙门</div>
            </div>
            <div class="col-md-5 column" style="height:100%;">
                <div id="3-3-1" class="device2" style="left : 2%;width: 96%; ">定梁式龙门GLU28*40</div>
                <div id="4-3-1" class="device2" style="left : 2%;top: 50%;width: 45%; ">T-V</div>
                <div id="4-3-2" class="device2" style="right: 2%;top: 50%;width: 45%; ">T-V</div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var radius = [30, 45];
    labelTop = {
        normal : {
            label : {
                show : true,
                position : 'center',
                formatter : '{b}'+"\n已完成"+'{c}'+'%'
            },
            labelLine : {
                show : false
            }
        }
    };

    var labelBottom = {
        normal : {
            color: '#ccc',
            label : {
                show : false
            },
            labelLine : {
                show : false
            }
        },
        emphasis: {
            color: 'rgba(0,0,0,0)',
            labelLine : {
                show : false
            }
        }
    };
    var myChart = echarts.init(document.getElementById('charts'));
    option = {
        series: [
            {
                name: '生产完成率',
                type: 'gauge',
                min: 0,
                max: 100,
                splitNumber: 10,
                radius: '80%',
                center: ['50%', '60%'],
                startAngle: 240,
                endAngle: -60,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: 10
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 15, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title: {
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    },
                    offsetCenter: [0, '80%']
                },
                detail: {
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data: [{
                    value: 0,
                    name: '订单完成率'
                }]
            },
            {
                name: '计划生产个数',
                type: 'gauge',
                center: ['25%', '60%'], // 默认全局居中
                radius: '50%',
                min: 0,
                max: 200,
                startAngle:300,
                endAngle: 60,
                splitNumber: 8,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                title: {
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    },
                    offsetCenter: [0, '130%'] // x, y，单位px
                },
                detail: {
                    textStyle: {
                        fontWeight: 'bolder'
                    }
                },
                data: [{
                    value: 0,
                    name: '计划生产数'
                }]
            },
            {
                name: '实际投产个数',
                type: 'gauge',
                center: ['75%', '60%'], // 默认全局居中
                radius: '50%',
                min: 0,
                max: 200,
                startAngle: 120,
                endAngle: -120,
                splitNumber: 8,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                title: {
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    },
                    offsetCenter: [0, '130%'], // x, y，单位px
                },
                detail: {
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data: [{
                    value: 0,
                    name: '实际投产数'
                }]
            },
            {
                type : 'pie',
                center : ['10%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'CNC', value:0,itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['20%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'打磨', value:0,itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['30%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'攻牙', value:0,itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['40%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'焊接', value:0,itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['50%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'线切割', value:0,itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['60%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'车床', value:0,itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['70%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'钻床', value:0,itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['80%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'铣床', value:0,itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['90%', '10%'],
                radius : radius,
                x: '0%', // for funnel
                data : [
                    {name:'other', value:100,itemStyle : labelBottom},
                    {name:'锯床', value: 0,itemStyle : labelTop}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    function autoScroll(obj) {
        $(obj).find("table").animate({
            marginTop: "-39px"
        }, 500, function () {
            $(this).css({marginTop: "0px"}).find("tr:first").appendTo(this);
        })
    }

    function wsConnect() {
        var socket = new SockJS('/mj-websocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.subscribe('/topicKanBan/deviceData', function (data) {
                var jsonDate = JSON.parse(data.body);
                deviceColorChange(jsonDate.devicePosition,jsonDate.deviceState);
            });
            stompClient.subscribe('/topicKanBan/tableData', function (data) {
                var jsonDate = JSON.parse(data.body);
                var html = template("workOrders", jsonDate);
                $("#scrollList").html(html);
            });
            stompClient.subscribe('/topicKanBan/chartsData', function (data) {
                var jsonDate = JSON.parse(data.body);
                getChartData(jsonDate);
            });
            stompClient.subscribe('/topicKanBan/getMechanicsAllColor', function (data) {
                var jsonDate = JSON.parse(data.body);
                var list = jsonDate.items;
                for (var i = 0; i < jsonDate.length; i++) {
                    deviceColorChange(list[i].device_position,list[i].device_state);
                }
            });
            stompClient.subscribe('/topicKanBan/getWorkOrders', function (data) {
                var jsonDate = JSON.parse(data.body);
                var html = template("workOrders", jsonDate);
                $("#scrollList").html(html);
            });
        });

    }

    function deviceColorChange(deviceId, color) {
        var sth = ''+color;
        switch (sth) {
            case '1':
                $("#" + deviceId).css("background-color", "#F0F708");break;
            case '2':
                $("#" + deviceId).css("background-color", "#3EF907");break;
            case '3':
                $('#' + deviceId).css("background-color", "#F90707");break;
            case '4':
                $("#" + deviceId).css("background-color", "#C16088");break;
        }
    }


    function sendBackgroudColor() {
        stompClient.send("/getColor", {},JSON.stringify({ 'name': '' }));//5
    }
    function getScrollData() {
        stompClient.send("/getWorkOrders", {},JSON.stringify({ 'name': '' }));//5
    }


    function getChartData(data){

        option.series[0].data[0].value = data.completeRate;

        option.series[1].max = data.maxCnt;
        option.series[1].data[0].value = data.planCnt;

        option.series[2].max = data.maxCnt;
        option.series[2].data[0].value = data.actualCnt;

        switch (data.technologyName){
            case 'CNC': pieSetData(3,data.result);break;
            case '打磨': pieSetData(4,data.result);break;
            case '攻牙': pieSetData(5,data.result);break;
            case '焊接': pieSetData(6,data.result);break;
            case '线切割': pieSetData(7,data.result);break;
            case '车床': pieSetData(8,data.result);break;
            case '钻床': pieSetData(9,data.result);break;
            case '铣床': pieSetData(10,data.result);break;
            case '锯床': pieSetData(11,data.result);break;
            default:break;
        }
        myChart.setOption(option, true);
    }
    function pieSetData(seriesIndex,v) {
        option.series[seriesIndex].data[0].value = 100-v;
        option.series[seriesIndex].data[1].value = v;
    }
    $(function () {
        setInterval('autoScroll(".scroll")', 2000);
        wsConnect();
        setTimeout('sendBackgroudColor()', 1000); //延迟1秒
        setTimeout('getScrollData()', 1000); //延迟1秒
    })

</script>
</body>
</html>